<template>
  <i-page>
    <template #header>
      <a-page-header title="角色列表">
        <div class="d-flex justify-space-between">
          <a-typography-paragraph>
            管理员管理、查看并修改角色配置项
          </a-typography-paragraph>

          <div style="position: relative;top: 0;right:40px;height: 120px">
            <img
                class="image"
                :src="TouZi"
                alt="content"
                height="255"
                style="margin-top: -90px"
            />
          </div>

        </div>
      </a-page-header>
    </template>
    <a-row :gutter="24">
      <a-col :span="4">
        <i-sheet radius shadow>
          <div class="article-type flex-fill d-flex flex-column pa-2">
            <div class="text-center font-size-body-1">文章类型</div>
            <a-divider class="ma-0 my-3"/>
            <div class="overflow-y-auto height-inherit">
              <div v-for="item in typeApi.tableState.dataSource" class="mb-3">
                <a-dropdown class="fill-width" trigger="contextmenu">
                  <div class="d-flex fill-width">
                    <a-button
                        :class="{'active-item':state.active == item.id}"
                        :type="state.active == item.id?'primary':undefined"
                        :ghost="state.active == item.id"
                        class="fill-width d-flex align-center justify-center"
                        @click="onType(item)">
                      <div :style="{backgroundColor:item.color}" class="mr-2" style="width: 6px;height: 6px;border-radius: 100%;"></div>
                      <div>{{ item.name }}</div>
                    </a-button>
                  </div>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item @click="typeApi.onEdit(item.id)">编辑</a-menu-item>
                      <a-menu-item @click="typeApi.onDelete(<string>item.id)">删除</a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </div>
            </div>

            <div >
              <a-button class="fill-width" text @click="typeApi.onCreate()">创建</a-button>
            </div>
          </div>
        </i-sheet>
      </a-col>
      <a-col :span="20">
        <i-sheet radius shadow>
          <div class=" d-flex flex-column">
            <div class="pa-4 d-flex align-center justify-space-between">
              <div class="font-weight-bold font-size-title-1">文章列表</div>
              <a-space>
                <a-button plain type="primary" @click="api.onCreate()">创建</a-button>
                <a-button plain icon="" @click="api.refreshTable()">刷新</a-button>
              </a-space>

            </div>

            <a-table
                :data-source="api.tableState.dataSource"
                :loading="api.tableState.loading"
                :pagination="api.tableState.pagination"
                @change="(e:any)=>api.onTableChange(e)"
            >

              <a-table-column title="标题" data-index="title"/>
              <a-table-column title="副标题" data-index="subTitle"/>
              <a-table-column title="类型" data-index="articleType.name">
                <template #default="{ record }">
                  {{ record.articleType?.name }}
                </template>
              </a-table-column>
              <a-table-column title="关键字" data-index="keywords"/>
              <a-table-column title="是否发布" data-index="enable">
                <template #default="{ record }">
                  {{ record.enable ? "发布" : "隐藏" }}
                </template>
              </a-table-column>

              <a-table-column key="action" title="操作" :width="200" align="center">
                <template #default="{ record }">
                  <a-space class="fill-width">
                    <a-button size="small" type="link" text @click="api.onDetail(record.id)">详情</a-button>
                    <a-button size="small" text type="link" @click="api.onEdit(record.id)">编辑</a-button>
                    <a-button size="small" text type="link" danger @click="api.onDelete(record.id)">删除</a-button>
                  </a-space>
                </template>
              </a-table-column>
            </a-table>
          </div>

        </i-sheet>
      </a-col>
    </a-row>


    <Create :api="api"/>
    <Edit :api="api"/>
    <Detail :api="api"/>

    <CreateType :api="typeApi"/>
    <EditType :api="typeApi"/>
  </i-page>
</template>

<script setup lang="ts">
import {onMounted, reactive} from "vue";
import Create from "~/views/system/article/Create.vue";
import CreateType from "~/views/system/articleType/Create.vue";
import EditType from "~/views/system/articleType/Edit.vue";
import Edit from "~/views/system/article/Edit.vue";
import Detail from "~/views/system/article/Detail.vue";
import {ArticleApi, ArticleTypeApi} from "~/api/system/article.api";
import TouZi from "~/assets/svg/投资者.svg";
import Img from "~/assets/RzwpdLnhmvDJToTdfDPe.png";

const api = new ArticleApi();
const typeApi = new ArticleTypeApi();
const state = reactive({
  active: "",
});

function onType(item: any) {
  if (state.active == item.id) {
    state.active = "";
    api.filterTable({ typeId: "" });
  } else {
    state.active = item.id;
    api.filterTable({ typeId: item.id });
  }

}

onMounted(() => {
  api.onListPage();
  typeApi.tableState.pagination.pageSize = 10000;
  typeApi.onListPage();
});
</script>

<style scoped lang="scss">
.article-page {
  width: fit-content;
}

.article-type {
  width: 100% !important;
  height: calc(100vh - 360px);
  border-right: 1px solid rgba(5, 5, 5, 0.06);
  overflow-y: auto;

  .type-item {
    margin-bottom: 12px;

  }
}

.active-item {
}
</style>
